<template>
	<view class="advertisement">
		<!-- <app-headers></app-headers> -->
		<image :src="imgSrc"></image>
		<view class="bottomTXT">
			<canvas canvas-id="canvasbtn" id="canvasbtn" class="canvasbtn" @click="goLogin"></canvas>
			<!-- <button class="cu-btn round"  @click="goLogin">跳过</button> -->
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvasbtn = null;
	let time = null,time2=null;
	let count = 3;
	export default {
		data() {
			return {
				imgSrc: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/other/startImg/2020-11-22.png',

				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio: 1,
			};
		},
		onLoad() {
			_self = this;
			this.cWidth3 = uni.upx2px(100); //这里要与样式的宽高对应
			this.cHeight3 = uni.upx2px(100); //这里要与样式的宽高对应
			this.arcbarWidth = uni.upx2px(6);
			this.getServerData();
		},
		methods: {
			goLogin() {
				this.$pub.swiTab('/pages/index/index')
				clearInterval(time2)
				time2 = null
			},
			getServerData() {
				let Arcbar1 = {
					series: [{
						name: '跳过',
						data: 1,
						color: '#2fc25b'
					}]
				}
				_self.showArcbar("canvasbtn", Arcbar1);
			},
			showArcbar(canvasId, chartData) {
				canvasbtn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 12,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true,
					title: {
						color: chartData.series[0].color,
						fontSize: 8 * _self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name, //这里您可以直接给任意字符串
						color: '#ffffff',
						fontSize: 12 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle',
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
						}
					}
				});

				time2 = setInterval(() => {
					canvasbtn.updateData({
						series: [{
							name: '跳过',
							data: 0.25*count,
							color: '#2fc25b'
						}],
						animation: false,
					});
					if (count <=-1) {
						this.$pub.swiTab('/pages/index/index')
						clearInterval(time2)
						time2 = null
					}
					count--
					console.log(11, count)
				}, 1000)
			}

		}
	};
</script>

<style lang="less" scoped>
	.advertisement {
		position: relative;
		width: 100%;
		height: 100vh;

		image {
			width: 100%;
			height: 100%;
		}

		.bottomTXT {
			position: absolute;
			top: calc(30rpx + var(--status-bar-height));
			z-index: 9999;
			right: 4%;

			.cu-btn {
				border-radius: 50%;
				height: 100rpx;
				width: 100rpx;
			}
		}
	}

	.canvasbtn {
		// background-color: #fff;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
</style>
